<template>
	<div class="table-div">
		<!-- 表格头部面板 -->
		<div class="table-panel">
			<!-- 
                @keyup.native ---- 键盘松开事件
				@keyup.enter.native ---- 回车事件
             -->
			<el-input
				v-model="search.keyword"
				placeholder="关键字查询"
				class="filter-item"
				@keyup.enter.native="initTableData"
				@keyup.native="initTableData"
			/>
			<el-button plain type="primary" icon="el-icon-plus" @click="addModel()">新增</el-button>
		</div>

		<!-- 
            表格
            @row-click ---- 行点击事件
			@select-all ---- 全选事件
			@select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
        -->
		<el-table
			ref="list"
			:data="tableData.list"
			style="width: 100%; margin-top: 10px"
			border
			stripe
			highlight-current-row
			@sort-change="changeSort"
		>
			<!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件
            -->
			
			<el-table-column property="productName" label="商品名" width="120" align="center" sortable="custom"></el-table-column>
			<el-table-column property="category.categoryName" label="种类" align="center"></el-table-column>
			<el-table-column property="productImage" label="图片" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.productImage" width="70" height="70"/>
				</template>
			</el-table-column>
			<el-table-column property="productPrice" label="单价" align="center"></el-table-column>
			<el-table-column property="number" label="库存" align="center"></el-table-column>
			<el-table-column property="saleCount" label="销量" align="center" sortable="custom"></el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button
						plain
						icon="el-icon-edit"
						type="primary"
						title="编辑"
						size="small"
						@click="editModel(scope.row)"
					>编辑</el-button>
					<el-button
						plain
						icon="el-icon-delete"
						type="danger"
						title="删除"
						size="small"
						@click="deleteModel(scope.row)"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- model 编辑框 -->
		<ProductEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"t></ProductEdit>
		
				<!-- 
		            分页
		            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
		            @emitPageData ---- 子组件 $emit 函数定义的 key
		            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
		        -->
				<Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
			</div>
		</template>
		<script>
		import Pagination from "@/components/fragments/Pagination.vue";
		import ProductEdit from "@/components/product/ProductEdit.vue"
		export default {
			name: "Products",
			components: {
				Pagination,
				ProductEdit,
			},
			data: function () {
				return {
					// 查询参数
					search: {
						currentPage: 1,
						pageSize: 5,
						keyword: "",
						sort: "",
						direction: "",
					},
					// 表格数据结构，参考 PageInfo
					tableData: {
						total: 20, // 总数据量
						pageNum: 1, // 当前页
						pageSize: 5, // 页长
						pages: 1, // 总页数
						list: [],
					},
					// 编辑窗口数据
					dialogData: {
						id: 0,
						// 是否显示编辑窗口
					},
				};
			},
			methods: {
				// 初始化表格数据
				initTableData: function () {
					// var self = this;
					// $.ajax({
					// 	url: "http://127.0.0.1:8888/api/account/users",
					// 	type: "post",
					// 	contentType: "application/json",
					// 	data: JSON.stringify(this.search),
					// 	success: function (result) {
					// 		self.tableData = result;
					// 	},
					// 	error: function (data) {
					// 		// TODO
					// 	},
					// });
					this.$Request
						.fetch_("/api/product/selectProductPage", "post", this.search)
						.then((result) => {
							
							/* 
							 tableData: {
							 	total: 20, // 总数据量
							 	pageNum: 1, // 当前页
							 	pageSize: 5, // 页长
							 	pages: 1, // 总页数
							 	list: [], // 当前页数据集合
							 */
							//console.log("123" + JSON.stringify(result));
							var newResult  = result.data;
							this.tableData.list = newResult.records;
							this.tableData.total = newResult.total;
							this.tableData.pageNum = newResult.current;
							this.tableData.pageSize = newResult.size;
						})
						.catch((error) => {
							this.$message.error(error);
						});
				},
				// 接收分页组件 $emit 函数传递的值
				receivePageData: function (pageData) {
					this.search.currentPage = pageData.pageNum;
					this.search.pageSize = pageData.pageSize;
					this.initTableData();
				},
				// 自定义排序函数
				changeSort: function (obj) {
					this.search.sort = this.$Common.camecaseToLine(obj.prop);
					this.search.direction = obj.order == "descending" ? "desc" : "asc";
					this.initTableData();
				},
				// 接收编辑组件 $emit 函数传递的值
				receiveDialogData: function (showEditDialog) {
					this.dialogData.showEditDialog = showEditDialog;
					if (this.dialogData.id == 0) {
						this.search.currentPage = 1;
					} else {
						this.search.currentPage = this.tableData.pageNum;
					}
					this.initTableData();
				},
				// 新增 model
				addModel: function () {
					this.dialogData = {
						id: 0,
						showEditDialog: true,
					};
					// this.dialogData.id = 0;
					// this.dialogData.showEditDialog = true;
				},
				// 编辑 model
				editModel: function (row) {
					this.dialogData = {
						id: row.productId,
						editData: row,
						showEditDialog: true,
					};
				},
				// 删除 model
				deleteModel: function (row) {
					this.$confirm("确定要删除当前行吗？", "删除", {
						comfirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
						.then(() => {
							console.log("0-0-0-0-0-0-0-0-0-0-0-0-0-");
							console.log(JSON.stringify(row));
							var url = "/api/product/deleteProductByName/" + row.productName;
							this.$Request
								.fetch_(url, "delete", {})
								.then((result) => {
									if (result.status == this.$Request.OK_CODE) {
										this.$message({
											message: "删除成功",
											type: "success",
											duration: 2 * 1000,
										});
										this.search.currentPage = 1;
										this.initTableData();
									} else {
										this.$message.error(result.message);
									}
								})
								.catch((error) => {
									this.$message.error(error);
								});
						})
						.catch(() => {});
				},
			},
			mounted() {
				this.initTableData();
			},
		};
		</script>
		<style>
		.table-div {
			margin-top: 10px;
		}
		.filter-item {
			float: right;
			width: 200px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			/* margin-right: 5px; */
		}
		.button-item {
			float: left;
			width: 100px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			margin-right: 5px;
		}
		</style>